<template>
	<view>
		<view class="noResultInfo" v-if="resultInfo.length === 0">
			暂无匹配信息
		</view>
		<view class="result" v-else>
			<view class="user-item" v-for="(item, index) in resultInfo" :key="index">
				<view class="touxiang">
					<view>
						<view class="img"><image mode="widthFix" :src="item.avatarUrl"></image></view>
						<view class="contactBtn">
							<button type="primary" size="mini" @click="contactUser(index)">
								联系ta
							</button>
						</view>
					</view>
				</view>
				<view class="user-right">
					<view
						><text>昵称:&nbsp;{{ item.gameNickName }}</text></view
					>
					<view
						><text>季节:&nbsp;{{ item.season }}</text
						><text
							>状态:&nbsp;{{
								item.pinkaState === '0' ? '拼卡' : item.pinkaState === '1' ? '卖卡' : '互卡'
							}}</text
						><text>数量:&nbsp;{{ item.cardNum }}</text></view
					>
					<view>QQ:&nbsp;{{ item.qq }}</view>
					<view>微信:&nbsp;{{ item.wechat }}</view>
					<view>手机:&nbsp;{{ item.phone }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {}
		},
		onLoad() {
			console.log(this.resultInfo)
		},
		methods: {
			// 点击联系用户
			contactUser(index) {
				// 更改当前登录用户和被联系的用户的userState
				uni.showModal({
					content: '联系对方后,将不再参与匹配,可在个人中心页手动打开!',
					success: (res) => {
						if (res.confirm) {
							this.$http({
								name: 'update_sky_user_ById',
								data: {
									_openid: this.userInfo._openid,
									userState: '0',
								},
							}).then((res) => {
								if (res.stats.updated === 1) {
									this.userInfo.userState = '0'
									this.$store.dispatch('setUserInfo', this.userInfo)
								}
							})
						}
					},
				})
			},
		},
		computed: {
			...mapState(['resultInfo', 'userInfo']),
		},
	}
</script>
<style lang="scss" scoped>
	.noResultInfo {
		width: 750rpx;
		color: #bdc3c7;
		text-align: center;
		margin: 50rpx auto;
	}
	.result {
		margin: 0 auto;
		line-height: 2;
		color: #fff;
		& > view {
			margin-bottom: 50rpx;
		}
		.user-item {
			display: flex;
			flex-wrap: nowrap;
			align-items: stretch;
			margin: 25rpx 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
			.touxiang {
				flex: 200rpx 0 0;
				view {
					width: 200rpx;
					height: 200rpx;
					.img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 20rpx;
						overflow: hidden;
						margin: 20rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.contactBtn {
						display: flex;
						justify-content: center;
						button {
							margin: 0 auto;
							height: 70rpx;
							line-height: 70rpx;
						}
					}
				}
			}
			.user-right {
				flex: auto;
				background-color: #fff;
				color: black;
				font-size: 30rpx;
				text {
					padding-right: 10rpx;
				}
			}
		}
	}
</style>
